<template>
	<view class="info-box">
		<view v-if="userinfo.isLogin">
			 <navigator url="/pages/client/vipcard/vipcm">	
				 <view class="home-vip-tag-box">
					 <image class="bg" v-if="userinfo.group_id == 1" :src="statics.vipbg" mode="aspectFill"></image>
					 <image class="bg" v-else :src="statics.vipcardBg[3]" mode="aspectFill"></image>
					 <view v-if="userinfo.group_id == 1" class="main plr15 flex alcenter space">
						 <view class="tag-no-vip flex alcenter center pr10">
							<image class="tag-no-vip-img" :src="statics.vipLevelImg[0]"></image>
						 </view>
						 <view class="alcenter ml20" style="width: 60%;">
							 <text class="ft14 cl-light mr15 vip-level-text">{{$t('vip.level1')}}</text>
							 <text class="ft12 cl-light mr15 vip-level-text">{{$t('vip.uptip')}}</text>
						 </view>
						 <uni-icons type="right" class="right-icon" size="20" color="white"></uni-icons>
					 </view>
					 
					 <view v-else class="main plr15 flex alcenter space">
						 <view class="tag-has-vip flex alcenter center">
							 <image class="vip-level-icon" :src="statics.vipLevelImg[2]"></image>
							 <text class="vip-level-means">{{$t('vip.level2')}}</text>
						 </view>
						 <view class="flex alcenter">
							 <view class="ft12 cl-default plr15">{{$t('vip.welcome')}}<br>{{userinfo.viptip}}</view>
							 <view class="pl5"><image class="right-icon" :src="statics.rightIcon"></image></view>
						 </view>
					 </view>
				 </view>
			 </navigator>
			 
		</view>
		<view v-else class="box pd24_15">
			<view class="text-center ft14 cl-info2">{{$t('Vip login tip')}}</view>
			<view class="flex center mt24">
				<button class="btn-mid" @click="loginAct" :style="getBtnStyle">{{$t('Sign in')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: ['userinfo'],
		data(){
			return {
				isLogin:true,
				vipLevel:0,//普通用户
			}
		},
		methods:{
			loginAct(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.info-box {
		.btn-mid {
			background: linear-gradient(107deg, #FF6469 0%, #FF4E6D 26%, #FB656A 48%, #F0AC63 99%) !important;
			border-radius: 14rpx !important;
		}
	}
</style>
<style lang="scss">
	
	.home-vip-tag-box{
		height: 150rpx;
		width: 100%;
		position: relative;
		overflow: hidden;
		border-radius: 8rpx;
	}
	.home-vip-tag-box .main{
		width: 100%;
		height: 150rpx;
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
	}
	.home-vip-tag-box .bg{
		width: 100%;
		height: 150rpx;
	}
	.tag-no-vip{
		border-right: 1px solid rgb(247, 245, 187);
		width: 25%;
	}
	.tag-no-vip-img{width: 120rpx;height: 120rpx;}
	.vip-level-text{display: block;}
	.tag-has-vip{
		width: 200rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #333333 0%, #000000 100%);
		border-radius: 20rpx;
	}
	.tag-has-vip .vip-level-icon{
		width: 36rpx;
		height: 36rpx;
	}
	.tag-has-vip .vip-level-means{
		font-size: 24rpx;
		margin-left: 8rpx;
		font-weight: 500;
		background: linear-gradient(180deg, #F2DCA9 0%, #C79556 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.home-vip-tag-box .main .right-icon{
		width: 40rpx;
		height: 40rpx;
	}
</style>
